<template>
	<view class="container files-index-container">
		<view class="page-main">
			<view class="page-list" v-if="pageData.id">
				<view class="list-top">
					<image class="top-head" :src="$fileUrl+'head.png'" mode="aspectFill"></image>
					<text class="top-title">{{pageData.name}}</text>
					<text class="top-tips">{{pageData.gender}}</text>
					<text class="top-tips">{{pageData.age}}岁</text>
				</view>
				<view class="list-main">
					<view class="info-list">
						<text class="info-title">手机号：</text>
						<text class="info-words">{{pageData.phone}}</text>
					</view>
					<view class="info-list">
						<text class="info-title">就诊次数：</text>
						<text class="info-words">{{pageData.visitCount || 0}}</text>
					</view>
					<view class="info-content">
						<view class="content-title">{{pageData.section || ''}}</view>
						<view class="info-list">
							<text class="info-title">诊断：</text>
							<text class="info-words">{{pageData.diagnoseResult || '-'}}</text>
						</view>
						<view class="info-list">
							<text class="info-title">基本信息：</text>
							<text class="info-words">
								<text v-if="pageData.allergyHistory">
									过敏史：{{pageData.allergyTypes}}、
								</text>
								<text v-else>无过敏史、</text>
								
								<text v-if="pageData.familyDiseaseHistory">
									有家族病史、
								</text>
								<text v-else>无家族病史、</text>
								
								<text v-if="pageData.kidneyFunctionAbnormal">
									肾功能异常、
								</text>
								<text v-else>肾功能正常、</text>
								
								<text v-if="pageData.liverFunctionAbnormal">
									肝功能异常、
								</text>
								<text v-else>肝功能正常、</text>
								
							</text>
						</view>
					</view>
				</view>
				<view class="list-bottom">
					<view class="yuan-btn btn-default" @click="getPageData()">刷新档案</view>
				</view>
			</view>
			<view class="page-list" style="text-align: center;" v-else>
				<image class="null-img" :src="$fileUrl+'null.png'" mode="aspectFill"></image>
				<view class="null-title">无健康档案</view>
				<view class="null-words">如您已线下就诊，无需新建档案，请耐心等待资料上传</view>
				<view class="list-bottom">
					<view class="yuan-btn btn-default" @click="getPageData()">刷新档案</view>
				</view>
			</view>
		</view>
		<view class="page-bottom">

			<view class="yuan-btn btn-primary" @click="clickAdd">新建档案</view>
		</view>
		<view class="log-box" @click="clickLog">
			<view class="iconfont">&#xe61f;</view>
			<view class="log-btn">健康趋势</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { onShow } from "@dcloudio/uni-app"
	import { hideLoading, showLoading } from '../../common/util';
	import userApi from '../../common/userApi';
	const pageData = ref<any>({})
	onShow(() => {
		getPageData()
	})
	const getPageData = async () => {
		showLoading()
		try {
			const res = await userApi.getHealthRecord()
			pageData.value = res.data || {}
		} finally {
			hideLoading()
		}
	}
	const clickAdd = () => {
		uni.navigateTo({ url: '/pagesChat/files/add?id=' + (pageData.value.id || '') })
	}
	const clickLog = () => {
		uni.navigateTo({ url: '/pagesChat/files/logIdx' })
	}
</script>

<style lang="scss">
	.files-index-container {
		background: linear-gradient(180deg, #DAFBFB 0%, #D7E5FF 8%, #F2F3F8 40%, #F2F3F8 100%);
		padding: 30rpx;
		padding-bottom: 120rpx;

		.page-main {
			margin-top: 10rpx;
		}

		.page-list {
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			box-shadow: 0rpx 0rpx 6rpx 4rpx rgba(100, 100, 100, 0.1);
			padding: 25rpx;
		}

		.list-top {
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;
			border-bottom: solid 1px rgba(232, 232, 232, 1);
		}

		.top-head {
			width: 88rpx;
			height: 88rpx;
			border: solid 1px #ADEDE5;
			border-radius: 88rpx;
		}

		.top-title {
			font-size: 32rpx;
			color: #202020;
			margin-left: 20rpx;
		}

		.top-tips {
			font-size: 24rpx;
			color: #383838;
			margin-left: 20rpx;
		}

		.list-main {
			padding: 20rpx 0;
		}

		.info-list {
			margin: 10rpx 0;
		}

		.info-title {
			font-size: 28rpx;
			color: #6D6D6D;
		}

		.info-words {
			font-size: 28rpx;
			color: #222222;
		}

		.info-content {
			background-color: rgba(242, 243, 248, 1);
			border-radius: 10rpx;
			padding: 25rpx;
		}

		.content-title {
			font-size: 32rpx;
			color: #383838;
		}

		.list-bottom {
			border-top: solid 1px rgba(232, 232, 232, 1);
			padding-top: 25rpx;
			text-align: right;

			.yuan-btn {
				display: inline-flex;
				width: 200rpx;
				height: 60rpx;
				border-radius: 60rpx;
				font-size: 24rpx;
			}
		}

		.null-img {
			width: 500rpx;
			height: 320rpx;
		}

		.null-title {
			font-size: 32rpx;
			color: #202020;
			font-weight: bold;
		}

		.null-words {
			font-size: 24rpx;
			color: #202020;
			margin: 20rpx 0 80rpx 0;
		}

		.log-box {
			position: fixed;
			right: 0;
			bottom: 200rpx;
			background-color: #fff;
			text-align: center;
			padding: 20rpx 10rpx;
			border-radius: 8rpx;

			.iconfont {
				font-size: 36rpx;
				color: #68EE53;
			}

			.log-btn {
				font-size: 26rpx;
				margin-top: 10rpx;
			}
		}

		.page-bottom {
			position: fixed;
			width: 100%;
			height: 170rpx;
			padding: 20rpx;
			padding-bottom: 50rpx;
			background-color: #fff;
			box-shadow: 0rpx -1rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
			bottom: 0;
			left: 0;
			z-index: 10;

			.yuan-btn {
				height: 80rpx;
				border-radius: 80rpx;
				width: 100%;
			}
		}
	}
</style>